<!--[if IE 7]>
<!DOCTYPE>
<html lang="en">
	<head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
    <head>
           <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<!DOCTYPE HTML>
<html lang="en">
	<head>
<![endif]>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Pie 2D: Smart Label</title>
        <style type="text/css">
        	@import "../../../../dojo/resources/dojo.css";
			@import "../../../../dijit/tests/css/dijitTests.css";
			@import "../../../../dijit/themes/claro/claro.css";
			@import "../../resources/Legend.css";
        </style>
        <script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true, has:{'dojo-bidi': true}">
        </script>
        <script type="text/javascript">
 				dojo.require("dojo.parser");
 				dojo.require("doh.runner");

 				dojo.require("dojox.charting.Chart");
 				dojo.require("dojox.charting.plot2d.Pie");
 				dojo.require("dojox.charting.action2d.Highlight");
 				dojo.require("dojox.charting.action2d.MoveSlice");
 				dojo.require("dojox.charting.action2d.Tooltip");
 				dojo.require("dojox.charting.themes.Tom");
 				dojo.require("dojox.charting.widget.Legend");

 				var pieChart = null;
 				var legend = null;
 				dojo.addOnLoad(function () {
 					var dc = dojox.charting;
 					pieChart = new dc.Chart("pieChart", {
 						textDir: "rtl"
 					});
 					pieChart.setTheme(dc.themes.Tom).addPlot("default", {
 						type: "Pie",
 						font: "normal normal 10pt Tahoma",
 						fontColor: "#ccc",
 						labelWiring: "#ccc",
 						labelStyle: "columns",
 						htmlLabels: true,
 						startAngle: -10
 					}).addSeries("Series A", [{
 						y: 12.1,
 						text: "The country is \u05e1\u05d9\u05df.",
 						tooltip: "1,210 \u05de\u05dc\u05d9\u05d5\u05df."
 					}, {
 						y: 9.52,
 						text: "\u05d4\u05de\u05d3\u05d9\u05e0\u05d4\u0020\u05d4\u05d9\u05d0 India.",
 						tooltip: "952 million."
 					}, {
 						y: 2.66,
 						text: "\u05d0\u05e8\u05d4\u0022\u05d1.",
 						tooltip: "266 \u05de\u05dc\u05d9\u05d5\u05df."
 					}, {
 						y: 2.06,
 						text: "Indonisia.",
 						tooltip: "206 million."
 					}, {
 						y: 1.63,
 						text: "Brazil.",
 						tooltip: "163 million."
 					}, {
 						y: 1.48,
 						text: "Russian.",
 						tooltip: "148 million."
 					}, {
 						y: 1.29,
 						text: "Pakistan.",
 						tooltip: "129 million."
 					}, {
 						y: 1.25,
 						text: "Japan.",
 						tooltip: "125 million."
 					}, {
 						y: 1.23,
 						text: "Bangladesh.",
 						tooltip: "123 million."
 					}, {
 						y: 1.04,
 						text: "Nigeria.",
 						tooltip: "104 million."
 					}, {
 						y: 0.96,
 						text: "Mexico.",
 						tooltip: "96 million."
 					}, {
 						y: 0.84,
 						text: "Germany.",
 						tooltip: "84 million."
 					}, {
 						y: 0.74,
 						text: "Phillippines.",
 						tooltip: "74 million."
 					}, {
 						y: 0.74,
 						text: "Viet Nam.",
 						tooltip: "74 million."
 					}, {
 						y: 0.66,
 						text: "Iran.",
 						tooltip: "66 million."
 					}, {
 						y: 0.64,
 						text: "Egypt.",
 						tooltip: "64 million."
 					}]);
 					var anim_b = new dc.action2d.Highlight(pieChart, "default");
 					var anim_c = new dc.action2d.Tooltip(pieChart, "default");
 					pieChart.render();
 					legend = new dojox.charting.widget.Legend({
 						chart: pieChart,
 						horizontal: false
 					}, "legend");

 					doh.register("parse", function () {
 						dojo.parser.parse();
 					});

 					doh.register("test textDir", [{
 						name: "Pies textDir",

 						runTest: function () {
 							doh.is("rtl", pieChart.textDir, "pieChart: internal labels");
 							doh.is("rtl", legend.textDir, "legend: external labels");
 						}
 					}]);

 					doh.run();

 				});

 				function refreshChart() {
 					var newData = [];
 					for (var i = 0; i < 16; i++) {
 						newData.push(Math.random() * 10);
 					}
 					newData.sort(function (v1, v2) {
 						return v2 - v1
 					});
 					pieChart.updateSeries("Series A", newData);
 					pieChart.render();
 					legend.refresh();
 				}
        </script>
    </head>
    <body class="claro">
    	<h1>Pie 2D: Smart Label</h1>
		<p>Example of Pie chart using smart label:</p>
        <div style="margin:20px">
            <div id="pieChart" style="width: 470px; height: 350px; float:left;">
            </div>
            <div id="legend">
            </div>
        </div>
		<button onclick="refreshChart()">Random Data Test</button>
    </body>
</html>
